<template>
  <div v-if="proxy.isAuth(['ROOT','APPOINTMENT:SELECT'])">
    <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="form">
      <el-form-item>
        <el-date-picker
            v-model="dataForm.date"
            type="date"
            placeholder="选择日期"
            :editable="false"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
        />
      </el-form-item>
      <el-form-item prop="name">
        <el-input
            v-model="dataForm.name"
            placeholder="姓名"
            maxlength="10"
            class="input"
            clearable
        />
      </el-form-item>
      <el-form-item prop="tel">
        <el-input
            v-model="dataForm.tel"
            placeholder="电话号码"
            maxlength="11"
            class="input"
            clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchHandle()">查询</el-button>
        <el-button
            type="danger"
            :disabled="!proxy.isAuth(['ROOT', 'APPOINTMENT:DELETE'])"
            @click="deleteHandle()"
        >
          批量删除
        </el-button>
      </el-form-item>

      <!-- 状态筛选 -->
      <el-form-item class="mold">
        <el-radio-group v-model="dataForm.statusLabel" @change="searchHandle()">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="未签到"></el-radio-button>
          <el-radio-button label="已签到"></el-radio-button>
          <el-radio-button label="已结张"></el-radio-button>
          <el-radio-button label="已关团"></el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-table :data="data.datalist"
              :header-cell-style="{'background': '#f5f7fa'}"
              :border="true"
              :loading="data.loading"
              @selection-change="selectionChangeHandle">

      <el-table-column type="selection"
                       :selectable="selectable"
                       align="center"
                       width="50"
                       fixed/>

      <el-table-column type="index"
                       header-align="center"
                       align="center"
                       width="120"
                       label="字号"
                       fixed>
        <template #default="scope">
          <span>{{ (data.pageIndex - 1) * data.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <!-- 姓名列 -->
      <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="姓名"
          width="200"
          fixed
      />

      <!-- 性别列 -->
      <el-table-column
          prop="sex"
          header-align="center"
          align="center"
          label="性别"
          width="100"
      />
      <!-- 手龄列 -->
      <el-table-column
          prop="header"
          header-align="center"
          align="center"
          label="手龄"
          width="100"
      />

      <!-- 联系电话列 -->
      <el-table-column
          prop="tel"
          header-align="center"
          align="center"
          label="联系电话"
          width="150"
      />

      <!-- 身份证号列 -->
      <el-table-column
          prop="pid"
          header-align="center"
          align="center"
          label="身份证号"
          width="190"
      />

      <!-- 公司名称列 -->
      <el-table-column
          prop="company"
          header-align="center"
          align="center"
          label="公司名称"
          width="200"
      />
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作"
      >
        <template #default="scope">
          <el-button
              type="text"
              :disabled="!proxy.isAuth(['ROOT', 'APPOINTMENT:DELETE']) || scope.row.statuss!='未签到'"
              @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="data.pageIndex"
        :page-size="data.pageSize"
        :page-sizes="[10, 20, 50]"
        :total="data.totalCount"
        layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>
<script setup lang="ts">
import {getCurrentInstance, reactive} from "vue";


const {proxy} = getCurrentInstance();

const dataForm = reactive({
  name: null,
  tel: null,
  date: null,
  statusLabel: '全部',
  status: null
})
const data = reactive({
  dataList: [],
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  loading: false,
  selections: []
});
const dataRule = reactive({
  name: [
    {
      required: true,
      pattern: /^[\u4e00-\u9fa5]{1,10}$/,
      message: '姓名格式错误',
    },
  ],
  tel: [
    {
      required: true,
      pattern: /^1[1-9]\d{9}$/,
      message: '电话号码格式错误',
    },
  ],
});



function loadDataList() {
  data.loading = true;  // 开始加载数据

  // 根据 dataForm.statusLabel 的值设置 dataForm.status
  if (dataForm.statusLabel === '全部') {
    dataForm.status = null;  // 如果是'全部'，设置状态为null
  } else if (dataForm.statusLabel === '未签到') {
    dataForm.status = 1;  // 未签到状态设置为1
  } else if (dataForm.statusLabel === '已签到') {
    dataForm.status = 2;  // 已签到状态设置为2
  } else if (dataForm.statusLabel === '已结束') {
    dataForm.status = 3;  // 已结束状态设置为3
  } else if (dataForm.statusLabel === '已关团') {
    dataForm.status = 4;  // 已关团状态设置为4
  }
  let json = {
    name: dataForm.name,
    tel: dataForm.tel,
    date: dataForm.date,
    status: dataForm.status,
    page: data.pageIndex,
    length: data.pageSize // 修正了 pageSize 的拼写
  };

// 发起 HTTP 请求
  proxy.$http('/mis/appointment/searchByPage', "POST", json, true, function (resp) {
    let page = resp.page;

    // 状态映射字典
    let statusEnum = {
      "1": "未签到",
      "2": "已签到",
      "3": "已结束",
      "4": "已关闭"
    };

    // 更新页面数据
    for (let one of page.list) {
      one.status = statusEnum[one.status]; // 根据状态码映射状态描述
    }

    // 更新数据和状态
    data.datalist = page.list;
    data.totalCount = page.totalCount;
    data.loading = false; // 加载完成后关闭加载状态
  });

}

function searchHandle() {
  proxy.$refs['form'].validate(valid => {
    if (valid) {
      // 清除表单的验证错误
      proxy.$refs['form'].clearValidate();

      // 如果 date 字段有值，则将其设为 null
      if (dataForm.date) {
        dataForm.date = null;
      }

      // 如果 name 字段有值，则将其设为 null
      if (dataForm.name) {
        dataForm.name = null;
      }

      // 如果 tel 字段有值，则将其设为 null
      if (dataForm.tel) {
        dataForm.tel = null;
      }

      // 如果当前页面不是第一页，将其设为第一页
      if (data.pageIndex !== 1) {
        data.pageIndex = 1;
      }

      // 调用数据加载函数
      loadDataList();
    } else {
      // 如果表单验证失败，则返回 false
      return false;
    }
  });
}

function selectionChangeHandle(val) {
  data.selections = val;
}

function selectable(row, index) {
  if (row.status != '未签到') {
    return false;
  }
  return true;
}

function deleteHandle(id) {
  // 判断是否传入单个 id，否则从选中的记录中获取 id 列表
  let ids = id ? [id] : data.selections.map(item => item.id);

  // 如果没有选中记录，弹出提示
  if (ids.length === 0) {
    proxy.$message({
      message: '没有选中记录',
      type: 'warning',
      duration: 1200
    });
  } else {
    // 弹出确认框，确认删除操作
    proxy.$confirm("确定要删除选中的记录?", "提示", {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 删除操作
      let json = {ids: ids};
      proxy.$http('/mis/appointment/deleteByIds', 'POST', json, true, function (resp) {
        if (resp.rows > 0) {
          // 删除成功，显示提示
          proxy.$message({
            message: '删除成功',
            type: 'success',
            duration: 1200
          });
          loadDataList();  // 刷新数据列表
        } else {
          // 删除失败，显示提示
          proxy.$message({
            message: '删除失败',
            type: 'error',
            duration: 1200
          });
        }
      });
    }).catch(() => {
      // 如果用户取消操作，执行的逻辑
      proxy.$message({
        message: '已取消删除',
        type: 'info',
        duration: 1200
      });
    });
  }
}


loadDataList();
</script>
<style scoped lang="less">
@import "appointment";
</style>
